<template>
	<view class="content">
		<view class="toububjt">
			<view class="xiaobtext">总收益</view>
			<view class="xiaobtext_num">{{userinfo.total_money_sy}}</view>
			<view class="mainContext flexbetween">
				<view class="jifen">
					<view class="title" style="text-align: center;">团队人数：{{userinfo.total_team_num}}</view>
					<view class="text" style="text-align: center;">邀请总数：{{userinfo.yq_total_num}}</view>
				</view>
				<view class="yue">
					<view class="title" style="text-align: center;">累计订单数：{{userinfo.total_order_num}}</view>
					<view class="text" style="text-align: center;">今日邀请数：{{userinfo.today_yq_total_num}}</view>
				</view>
			</view>
			<view class="middle flexbetween">
				<view class="">
					<view class="text_b color_jiu">今日收益</view>
					<view class="num_money">{{userinfo.today_money_sy}}</view>
				</view>
				<view class="">
					<view class="text_b color_jiu">昨日收益</view>
					<view class="num_money">{{userinfo.yesterday_money_sy}}</view>
				</view>
				<view class="">
					<view class="text_b color_jiu">本月收益</view>
					<view class="num_money">{{userinfo.mouth_money_sy}}</view>
				</view>
			</view>
		</view>
		<view class="padding" style="margin-top: 70rpx; padding-bottom: 0;">
			<view class="">
				<u-tabs :list="list1" lineColor=" rgba(212, 139, 57, 1)" @click="clicktabtow" :activeStyle="{
					    color: ' #000000',
					    transform: 'scale(1.05)'
					}" :inactiveStyle="{
					            color: '#666666',
					            transform: 'scale(1)'
					        }" itemStyle="padding-left: 27px; padding-right: 27px; height: 50px;"></u-tabs>
			</view>

		</view>

		<view class="neirong">
			<view class="zwtimg placeholderimg flexcenter" v-if="list.data.length==0 && currenttabtow!=1">
							<image src="@/static/image/bg-icons/placeholderimg.png" mode=""></image>
						</view>
			<view class="ffffff radius margin_top" v-for="item in list.data" :key="item.id" v-if="currenttabtow!==1">
				<view class="padding margin_top xiahuax">
					<view class="flexbetween ">
						<view class="flexleft" style="flex-grow: 1;">
							<view class="image_ya">
								<image :src="item.avatar_text" mode=""></image>
							</view>
							<view class="center_zi">
								<view class="name">{{item.nickname}}</view>
								<view class="flexbetween">
									<view class="hui num" style="margin-top: 15rpx;">手机号：{{item.mobile}}</view>
								</view>
								<view class="hui num" style="margin-top: 13rpx;">{{date(item.jointime*1000)}}</view>
							</view>
						</view>
					</view>
					<view class="earnings">
						<view class="">贡献收益：<text style="" class="qian">￥{{item.total_price}}</text></view>
					</view>
				</view>
			</view>
			<!-- 空白页 -->
			<view class="zwtimg placeholderimg flexcenter" v-if="moneyInfoList.data.length==0 && currenttabtow==1">
							<image src="@/static/image/bg-icons/placeholderimg.png" mode=""></image>
						</view>
			<view class="ffffff radius margin_top" v-for="item in moneyInfoList.data" :key="item.id" v-if="currenttabtow==1">
				<view class="padding margin_top xiahuax">
					<view class="flexbetween">
						<view class="hui num fenhong">{{item.createtime_text}}</view>
						<view class="price orange">+{{item.money}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="gudingdb">
			<view class="bigbtn" @click="yaoqing">邀请好友</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				currenttabtow: 0,
				list1: [{
						name: '我的团队',
					},
					{
						name: '收益明细',
					}
				],
				page:1,
				limit:12,
				list:{
					data:[]
				},
				userinfo:{},
				page2: 1,
				limit2: 12,
				moneyInfoList: {
					data: []
				}
			}
		},

		onLoad() {
			this.datalist()
			this.init()
			this.getMoneyInfo()
		},
		methods: {
			datalist() {
				let _this = this;
				httpRequest.request('api/user/index', 'GET', {}).then(res => {
					if (res.code == 1) {
						this.userinfo = res.data
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			date(timer) {
						var date = new Date(timer); //当前时间
						var year = date.getFullYear() //返回指定日期的年份
						var month = repair(date.getMonth() + 1); //月
						var day = repair(date.getDate()); //日
						var curTime = year + "-" + month + "-" + day
						function repair(i) {
							if (i >= 0 && i <= 9) {
								return "0" + i;
							} else {
								return i;
							}
						}
						return curTime
					},
			init(isPage, page) { //获取vip商品
				let _this = this
				httpRequest.request('api/user/myTeam', 'GET', {
					page: page || 1,
					limit: _this.limit,
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getMoneyInfo(isPage, page) { //余额明细
				let _this = this
				httpRequest.request('/api/user/getUserMoneyLog', 'GET', {
					page: page || 1,
					limit: _this.limit2,
					type:2
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.moneyInfoList;
						if (isPage == true) {
							_this.moneyInfoList.data = dataList.data.concat(resList.data);
						} else {
							this.moneyInfoList = res.data
							_this.moneyInfoList.data = resList.data;
						}
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				if(this.currenttabtow==0){
					let list = _this.list;
					let page = _this.page;
					if (list.last_page <= page) {
						return false;
					}
					page++;
					_this.page = page;
					_this.init(true, page);
				}else{
					let list = _this.moneyInfoList;
					let page = _this.page;
					if (list.last_page <= page) {
						return false;
					}
					page++;
					_this.page2 = page;
					_this.getMoneyInfo(true, page);
				}
				
			},
			clicktabtow(e) {
				this.currenttabtow = e.index;
			},
			yaoqing() {
				uni.navigateTo({
					url: "/pages_my/yaoqinghy"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.qian{
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(212, 139, 57, 1);
	}
	.earnings {
		padding: 20rpx 30rpx;
		background-color: #f1f1f1;
		margin-top: 20rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	/deep/.u-tabs__wrapper__nav__item {
		//平均分配
		flex: 1;
	}

	.num_money {
		font-size: 34rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #000000;
		margin-top: 26rpx;
		text-align: center;
	}

	.radius {
		border-radius: 14rpx;
	}

	.image_ya {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}


	.num {
		padding-top: 5rpx;
		font-size: 22rpx;
		color: #999;
	}

	.neirong {
		width: 100%;
		// position: absolute;
		box-sizing: border-box;
		// top: 260rpx;
		padding: 0rpx 30rpx;
		padding-bottom: 150rpx;

		.orange {
			font-weight: bold;
			color: rgba(212, 139, 57, 1);
		}

		.fenhong {
			font-size: 28rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
		}
	}

	.middle {
		transform: translateY(50%);
		background-color: #fff;
		border-radius: 14rpx;
		position: absolute;
		bottom: 0;
		left: 30rpx;
		right: 30rpx;
		padding: 35rpx 54rpx 31rpx 54rpx;

		/* &>view>view {
			width: 30%;
			text-align: left;
			font-size: 26rpx;
		} */
	}

	.toububjt {
		position: relative;
		background-size: 100% 100%;
		width: 100%;
		padding: 30rpx 40rpx 0;
		height: 408rpx;
		box-sizing: border-box;
		background: linear-gradient(RGBA(221, 153, 76, 1) 0%, RGBA(221, 153, 76, 1) 100%);

		.xiaobtext {
			font-size: 26rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			text-align: center;
			// font-weight: 800;
			color: #FFFFFF;
			// padding-top:50rpx;
		}

		.xiaobtext_num {
			font-size: 68rpx;
			font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
			font-weight: bold;
			color: #FFFFFF;
			margin-top: 22rpx;
			color: #FFFFFF;
			text-align: center;
		}

		.mainContext {
			margin-top: 30rpx;

			color: #fff;

			&>view {
				width: 50%;
			}

			.title {
				font-size: 22rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}

			.text {
				font-size: 24rpx;
				margin-top: 40rpx;
				text-align: left;
			}
		}
	}

	.inp {
		background-color: #f3f3f3;
		width: 500rpx;
		padding: 0rpx 0rpx 0rpx 30rpx;
	}

	input:input-placeholder {
		font-size: 28rpx;
	}

	// 
	.name {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.center_zi {
		padding: 0rpx 20rpx;
		flex-grow: 1;
	}
</style>